<template>
    <el-row>
        <el-col :span="13">
            <el-card>
                <div id="chart01" style="width: 600px;height: 450px;"></div>
            </el-card>
        </el-col>
        <el-col :span="13">
            <el-card>
                <div id="chart02" style="width: 600px;height: 450px;"></div>
            </el-card>
        </el-col>
    </el-row>
</template>

<script setup>
import adminApi from '@/api/adminApi';
import * as echarts from 'echarts';
import { onMounted } from 'vue';


//定义函数：显示图表01
function chart01() {
    adminApi.top5()
        .then(resp => {
            let data = new Array();
            let count = new Array();

            for (let index = 0; index < resp.data.length; index++) {
                data.push(resp.data[index].park_name);
                count.push(resp.data[index].count);
            }

            var myChart = echarts.init(document.getElementById('chart01'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '停车场停泊车辆统计',
                    textStyle: {
                        color: '#000000',
                        fontWeight: 'lighter'
                    }
                },
                legend: {
                    data: [],
                    right: '10%',
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        color: '#000000'
                    }
                },
                xAxis: {
                    data: data,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#000000",
                            width: 1
                        }
                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: {
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#000000",
                            width: 1
                        }
                    },
                    splitLine: {
                        show: false
                    }
                },
                series: [
                    {
                        name: '车辆数',
                        type: 'bar',
                        data: count,
                        barWidth: '20%'
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

        });
}

onMounted(() => {
    chart01();
});
//定义函数：显示图表02
function chart02() {
    adminApi.top5()
        .then(resp => {
            let data = new Array();
            let count = new Array();

            for (let index = 0; index < resp.data.length; index++) {
                data.push(resp.data[index].park_name);
                count.push(resp.data[index].count);
            }

            let myChart = echarts.init(document.getElementById('chart02'));

            // 指定图表的配置项和数据
            let option = {
                title: {
                    text: '停车场停泊车辆统计',
                    left: 'center',
                    top: 'center'
                },
                series: [{
                    type: 'pie',
                    data: [{
                        value: count[0],
                        name: 'ABC停车场'
                    }, {
                        value:count[1],
                        name:'XYZ停车场'
                    },{
                        value:count[2],
                        name:'EFG地下停车场'
                    },{
                        value:count[3],
                        name:'PQR停车场'
                    }
                    ],
                    radius: ['40%', '70%']
                }],
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

        });
}
onMounted(() => {
    chart02();
});
</script>

<style scoped></style>